<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=o, initial-scale=1.0">
    <script src="../babel.min.js"></script>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <title>LiftingStateUp_Practice1</title>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class NumberInput extends React.Component {
            constructor(props) {
                super(props)
            }

            handleOnChange(e) {
                e.preventDefault()
                this.props.onNumberChange(e.target.value)
            }
            render() {
                const number = this.props.number
                const name = this.props.name
                return <div>
                    <label>Number Input For:{name}</label>
                    <input type="text" onChange={(e) => this.handleOnChange(e)} value={number} />
                </div>

            }
        }

        class NumberControl extends React.Component {
            constructor(props) {
                super(props)
                this.state = { number: '100', type: 'even' }
            }

            handleOnEvenChange(number) {
                this.setState({ number: number, type: "even" })
            }

            handleOnOddChange(number) {
                this.setState({ number: number, type: 'odd' })
            }
            render() {
                const number = parseInt(this.state.number)
                const even = this.state.type == 'odd' ? number * 2 : number
                const odd = this.state.type == 'even' ? number / 2 : number
                return <div>
                    <NumberInput name={"Even"} number={even} onNumberChange={(e) => this.handleOnEvenChange(e)} />
                    <NumberInput name={"Odd"} number={odd} onNumberChange={(e) => this.handleOnOddChange(e)} />
                </div>
            }
        }
        ReactDOM.render(<NumberControl />, document.getElementById("root"))
    </script>

</body>

</html>